<template>
  <div class="app-container">
    <!-- 高级查询 -->
    <el-tabs v-model="queryParams.status" type="card" @tab-click="handleQuery">
      <el-tab-pane name="created">
         <span slot="label"><i class="el-icon-bank-card" />新计划</span>
       </el-tab-pane>

       <el-tab-pane name="planed">
         <span slot="label"><i class="el-icon-bank-card" /> 已安排</span>
       </el-tab-pane>
       <el-tab-pane name="inposition">
         <span slot="label"><i class="el-icon-bank-card" /> 已入库</span>
       </el-tab-pane>
       <el-tab-pane name="charged">
         <span slot="label"><i class="el-icon-bank-card" /> 已结算</span>
       </el-tab-pane>
       <el-tab-pane name="all">
         <span slot="label"><i class="el-icon-bank-card" /> 全部</span>
       </el-tab-pane>
 </el-tabs>
    <el-form v-show="searchVisible" ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="仓库">

          <el-select v-model="queryParams.warehouseCode" filterable clearable placeholder="请选择">
          	<el-option v-for="item in  options.warehouseCodes" :key="item.id" :label="item.warehouserName"
          		:value="item.id">
          	</el-option>

          </el-select>
      </el-form-item>


	<el-form-item label="选择商品车：" prop="materialNo">
	  <el-input v-model="queryParams.materialNo" class="filter-item" >
	    <i slot="suffix" class="el-input__icon el-icon-search" @click="openMaterialSelector" />
	  </el-input>
	  <warehouse-customer-selector ref="warehouseCustomerSelector" :visible.sync="materialSelectorVisible" @selected="handleMaterialSelected" />
	</el-form-item>
      <el-form-item label="客户:">
       <el-select  v-model="queryParams.customerNo"
          style="width: 100%" filterable clearable
          	placeholder="请选择客户" >
          	<el-option v-for="option in options.customerOptions" :key="option.id"
          		:label="option.customerName" :value="option.id" />
          </el-select>
         </el-form-item>

      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 工具栏 -->
    <el-row :gutter="10" class="mb8">
     <!-- <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:insert']" type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:update']" type="success" icon="el-icon-edit" size="mini" :disabled="isSingle" @click="handleEdit">修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:delete']" type="danger" icon="el-icon-delete" size="mini" :disabled="isMultiple" @click="handleRemove">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:export']" type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col>
     <!-- <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:assignJob']" type="warning" icon="el-icon-download" size="mini" @click="handlePulishJob"> 发布上架任务</el-button>
      </el-col> -->
      <!-- <el-col :span="1.5">
        <el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:assignJob']" type="warning" icon="el-icon-download" size="mini" @click="handleAssign">安排上架任务</el-button>
      </el-col> -->
   <!--   <el-col :span="1.5">
      	<el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:insert']" type="info" icon="el-icon-upload2"
      		size="mini" :disabled="isMultiple" @click="handleAssign">生成上架计划</el-button>
      </el-col> -->


    <!--  <el-col :span="1.5">
      	<el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:insert']" type="info" icon="el-icon-upload2"
      		size="mini" @click="handleAutoInLoc">自动上架计划</el-button>
      </el-col>
      <el-col :span="1.5">
      	<el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:insert']" type="info" icon="el-icon-upload2"
      		size="mini" @click="handlePublish">发布上架任务</el-button>
      </el-col> -->
     <!-- <el-col :span="1.5">
      	<el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:export']" type="primary"
      		icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
      </el-col> -->
      <right-toolbar :show-search.sync="searchVisible" @queryTable="handleQuery" />
    </el-row>

    <!-- 数据列表 -->
    <el-table v-loading="loading" :data="page.records" highlight-current-row @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />

      <el-table-column label="二维码" align="center" prop="qrCode" width="200">
      	<template slot-scope="scope">
      		<div :id="'qrCode-' + scope.$index">
      			<!-- {{scope.$index}} -->
      			<vue-qr
      				:text="scope.row.id + ',' + scope.row.skuCode+ ','+ scope.row.materialName+ ','+ scope.row.customerName+ ',' +scope.row.materialNo + ',' + scope.row.customerNo + ',' + scope.row.quantity"
      				:size="100"></vue-qr>
      		</div>

      	</template>
      </el-table-column>
      <el-table-column label="入库号" align="center" prop="orderNo" />
      <el-table-column label="物品号" align="center" prop="materialNo" />
       <el-table-column label="物品号" align="center" prop="materialName" />
      <el-table-column label="单位" align="center" prop="measUnitNo" />
 <el-table-column label="客户名称" align="center" prop="customerName" />
  <el-table-column label="客户号" align="center" prop="customerNo" />
   <el-table-column label="业务号" align="center" prop="batchNo" />
      <el-table-column label="状态" align="center" prop="status" />
      <el-table-column label="数量" align="center" prop="quantity" />
      <el-table-column label="备注" align="center" prop="remark" />
      <el-table-column label="客户号" align="center" prop="customerNo" />
      <el-table-column label="射频标签" align="center" prop="rfidCode" />
      <el-table-column label="存储库位" align="center" prop="dockNo" />
     <el-table-column label="创建时间" align="center" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>

      <el-table-column width="300" label="操作" align="center" fixed="right" class-name="small-padding fixed-width">
      	<template slot-scope="scope">
      		<el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:update']" size="mini" type="text"
      			icon="el-icon-edit" @click="handleEdit(scope.row)">修改</el-button>
      		<el-button v-hasPermission="['web:tbWmsMaterialReceiptLine:delete']" size="mini" type="text"
      			icon="el-icon-delete" @click="handleRemove(scope.row)">删除</el-button>
      		<el-button size="small" type="primary" icon="el-icon-plus" @click="handlePrint(scope.$index)">打印
      		</el-button>
      		<el-button size="small" type="primary" icon="el-icon-plus" @click="handleView(scope.row)">详情
      		</el-button>
      	</template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination v-show="page.total>0" :total="page.total" :page.sync="page.current" :limit.sync="page.pageSize" @pagination="handleQuery" />

    <!-- 添加/修改对话框 -->





  </div>
</template>

<script>
import TbWmsMaterialReceiptLineApi from '@/api/web/TbWmsMaterialReceiptLineApi'
import HrEmployeeManageApi from '@/api/basic/HrEmployeeManageApi'
import TWmsReciptIntoLocPlanApi from '@/api/web/TWmsReciptIntoLocPlanApi'

 import WarehouseCustomerSelector from '@/views/pms/tWhWarehouseCustomerMaterial/WarehouseCustomerSelector'
 import WarehouseApi from '@/api/basic/WarehouseApi'
import CustomerApi from '@/api/basic/CustomerApi';
	import vueQr from 'vue-qr'
	import printJS from 'print-js'
const defaultTbWmsMaterialReceiptLineFormData = {
  lineNo: null,
  orderNo: null,
  materialNo: null,
  measUnitNo: null,
  conversionCoefficient: null,
  status: '0',
  quantity: null,
  version: null,
  receiptType: null,
  price: null,
  otherFees: null,
  checkerId: null,
  truckFee: null,
  customerNo: null,
  receiptId: null,
  batchNo: null,
  dockNo: null,
  site: null,
  receivedTime: null,
}
export default {
  name: 'TbWmsMaterialReceiptLineList',
  components: {
    WarehouseCustomerSelector,
  	vueQr
  },
  data() {
    return {
      options: {
        sysYnTypeOptions: this.$constant.sysYnTypeOptions,
        jobPersons: [],
          customerOptions:[],
          warehouseCodes:[],

       liftPersons: []
      },
      queryParams: {
        lineNo: null,
        userType: null,
        orderNo: null,
        materialNo: null,
        measUnitNo: null,
        conversionCoefficient: null,
        status: null,
        quantity: null,
        remark: null,
        version: null,
        receiptType: null,
        price: null,
        otherFees: null,
        checkerId: null,
        truckFee: null,
        customerNo: null,
        receiptId: null,
        batchNo: null,
        dockNo: null,
        site: null,
        receivedTime: null,
        createTime: null,
        isValid: this.$constant.Y
      },
      page: {
        current: 1,
        pageSize: 10,
        total: 0,
        records: []
      },
      employeePage: {
      	current: 1,
      	pageSize: 10,
      	total: 0,
      	erecords: []
      },
      employeeLiftPage: {
      	current: 1,
      	pageSize: 10,
      	total: 0,
      	lrecords: []
      },
      tbWmsMaterialReceiptLineFormDialog: {
        title: '',
        visible: false
      },
      assignDialog: {
        title: '分配任务',
        visible: false
      },
      assignDialogData: {
       needRepackYn: null,
       needLiftYn: null,
       liftEmployees: [],
       pickEmployees: [],
       needPalletYn: null,
       ids: []
      },
      tbWmsMaterialReceiptLineFormData: Object.assign({}, defaultTbWmsMaterialReceiptLineFormData),
      tbWmsMaterialReceiptLineFormRules: {
        lineNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        orderNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        materialNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        measUnitNo: [{ required: true, message: '不能为空', trigger: 'blur' }],
        conversionCoefficient: [{ required: true, message: '不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '不能为空', trigger: 'blur' }],
        quantity: [{ required: true, message: '不能为空', trigger: 'blur' }],
        version: [{ required: true, message: '不能为空', trigger: 'blur' }],
        receiptType: [{ required: true, message: '不能为空', trigger: 'change' }],
        price: [{ required: true, message: '不能为空', trigger: 'blur' }],
        otherFees: [{ required: true, message: '不能为空', trigger: 'blur' }],
      },
      loading: true,
      searchVisible: true,
      multipleSelection: [],
      materialSelectorVisible: false,
      isSingle: true,
      isMultiple: true
    }
  },
  created() {
   this.queryParams.createTime = this.$route.query.createTime
   this.queryParams.status = "created"

    this.handleQuery()

    this.loadOptions()
  },
  methods: {
    loadOptions() {
      let that = this;
    /*  queryParams.userType ='recept'
      HrEmployeeManageApi.list(queryParams).then(response => {
        that.options.jobPersons = response.data
      }) */

        WarehouseApi.list().then(response => {
          that.options.warehouseCodes = response.data
        })

      CustomerApi.list().then(res => {
      	that.options.customerOptions = res.data

      })
    /*  queryParams.userType ='lift'
            HrEmployeeManageApi.list(queryParams).then(response => {
              this.options.liftPersons = response.data
            }) */
    /* <!-- const params = {
         userType: "recept"
      } -->
      queryParams.userType ='recept'
      HrEmployeeManageApi.list(queryParams).then(response => {
        this.options.jobPersons = response.data
      })
     <!--  params = {
          userType: "lift"
       } --> */
 /*      queryParams.userType ='lift'
       HrEmployeeManageApi.list(queryParams).then(response => {
         this.options.liftPersons = response.data
       }) */

       },
       openMaterialSelector() {
         this.$refs.warehouseCustomerSelector.loadData()
         this.materialSelectorVisible = true
       },
       handleMaterialSelected(obj) {
             this.queryParams.materialNo =  obj.id
         },
    handlePrint(index) {
    	console.log(index)
    	let userAgent = navigator.userAgent;
    	let printableId = 'qrCode-' + index;
    	console.log(printableId)
    	//判断是否Firefox浏览器
    	if (userAgent.indexOf("Firefox") > -1) {
    		console.log('Firefox')
    		printJS({
    			printable: printableId, // 标签元素id
    			type: 'html',
    			header: '',
    			style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
                thead th {
                  border-top: 1px solid #000;
                  border-right: 1px solid #000;
                  border-left: 1px solid #000;
                }
                tbody td {
                  border: 1px solid #000;
                }
                tbody {
                  text-align: center;
                            }
                            table {
                              border-collapse: collapse;
                            }`,
                  	});
                  }
                  //判断是否chorme浏览器
                  if (userAgent.indexOf("Chrome") > -1) {
                  	console.log('Chrome')
                  	printJS({
                  		printable: printableId, // 标签元素id
                  		type: 'html',
                  		header: '',
                  		documentTitle: '',
                  		style: `@page {size:auto;margin-top:50%; margin-left:40%;}
                            thead th {
                              border-top: 1px solid #000;
                              border-right: 1px solid #000;
                              border-left: 1px solid #000;
                            }
                            tbody td {
                                        border: 1px solid #000;
                                      }
                                      tbody {
                                        text-align: center;
                                      }
                                      table {
                                        border-collapse: collapse;
                                      }`,
                            	});
                            }
                            //判断是否IE浏览器
                            if (!!window.ActiveXObject || "ActiveXObject" in window) {
                            	console.log('IE')
                            	printJS({
                            		printable: printableId, // 标签元素id
                            		type: 'html',
                            		header: '',
                                style: `@page {size:auto;margin-top:100px; margin-left:15px; margin-right: 15px;}
                                            thead th {
                                              border-top: 1px solid #000;
                                              border-right: 1px solid #000;
                                              border-left: 1px solid #000;
                                            }
                                            tbody td {
                                              border: 1px solid #000;
                                            }
                                            tbody {
                                              text-align: center;
                                            }
                                            table {
                                              border-collapse: collapse;
                                            }`,
                                		});
                                	}
                                },
    handleAdd() {
      this.openTbWmsMaterialReceiptLineFormDialog()
    },
    handleView(row) {
    	this.$router.push({
    		path: `/tbWmsMaterialReceiptLine/view/${row.id}`
    	})
    },
    handleAutoInLoc() {
    	TWmsReciptIntoLocPlanApi.inLocPlan().then(response => {
    		this.$message.success('上架计划生成成功')
    		this.handleQuery()
    	})
    },
    handlePublish() {
    	TWmsReciptIntoLocPlanApi.handlePublish().then(response => {
    		this.$message.success('上架计划生成成功')
    		this.handleQuery()
    	})
    },

    handleAssign(row) {
       const ids = row.id || this.multipleSelection.map(item => item.id)
         this.assignDialog.visible = true
         this.assignDialogData.ids = ids
    },
    confirmAssigDialog() {
       /* const params = {
          needRepackYn: this.assignDialogData.needRepackYn,
          needLiftYn: this.assignDialogData.needLiftYn,
          needPalletYn: this.assignDialogData.needPalletYn,
          jobPerson: this.assignDialogData.jobPerson,
          liftPerson: this.assignDialogData.liftPerson,
          ids: this.assignDialogData.ids
       } */
        this.assignDialogData.liftEmployees = this.lemployeeSelecMultipleSelection.map(item => item.id)
				this.assignDialogData.pickEmployees = this.employeeSelecMultipleSelection.map(item => item.id)

        console.log(params)
        	const ids = this.multipleSelection.map(item => item.id)
				TWmsReciptIntoLocPlanApi.inLocPlanBySelectItem(this.assignDialogData,ids).then(response => {
					this.$message.success('上架计划生成成功')
				})
        this.assignDialog.visible = false

          this.closeAssigDialog()

        this.handleQuery()
    },
    closeAssigDialog() {
      this.assignDialog = {
        title: ' 安排',
        visible: false
      }
      this.assignDialoggData = {
        ids: null,
        needRepackYn: null,
        needLiftYn: null,
        jobPerson: null,
        liftPerson: null
      }
       this.handleQuery()
    },
    handleRemove(row) {
      const ids = row.id || this.multipleSelection.map(item => item.id)
      this.$confirm('是否确认删除数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return TbWmsMaterialReceiptLineApi.remove(ids)
      }).then(() => {
        this.handleQuery()
        this.$message.success('删除成功')
      })
    },
    handleEdit(row) {
      const id = row.id || this.multipleSelection.map(item => item.id)[0]
      this.openTbWmsMaterialReceiptLineFormDialog(id)
    },

     handleInitQuery() {
       this.loading = true
         this.queryParams.status = "created"
           this.queryParams.receiptType = "tool"
       TbWmsMaterialReceiptLineApi.page(this.queryParams, this.page).then(response => {
         this.page.records = response.data.records
         this.page.total = response.data.total
         this.loading = false
       }, () => {
         this.loading = false
       })
     },
    handleQuery() {
      this.loading = true
      // if(this.queryParams.status === "all")
      // {
      //   this.queryParams.status =null

      // }
        this.queryParams.receiptType = "tool"
      TbWmsMaterialReceiptLineApi.page(this.queryParams, this.page).then(response => {
        this.page.records = response.data.records
        this.page.total = response.data.total
        this.loading = false
      }, () => {
        this.loading = false
      })
    },
    handleExport() {
      this.$confirm('是否确认导出数据?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(function() {
        return TbWmsMaterialReceiptLineApi.exportData(this.queryParams)
      }).then(response => {
        this.$common.download(response.msg)
      })
    },
    openTbWmsMaterialReceiptLineFormDialog(id) {
      this.resetTbWmsMaterialReceiptLineFormDialog()
      this.tbWmsMaterialReceiptLineFormDialog.visible = true
      if (id) {
        this.tbWmsMaterialReceiptLineFormDialog.title = '入库计划明细-修改'
        TbWmsMaterialReceiptLineApi.get(id).then(response => {
          this.tbWmsMaterialReceiptLineFormData = {
            ...this.tbWmsMaterialReceiptLineFormData,
            ...response.data
          }
        })
      } else {
        this.tbWmsMaterialReceiptLineFormDialog.title = '入库计划明细-添加'
      }
    },
    confirmTbWmsMaterialReceiptLineFormDialog() {
      this.$refs['tbWmsMaterialReceiptLineForm'].validate(valid => {
        if (valid) {
          if (this.tbWmsMaterialReceiptLineFormData.id) {
            TbWmsMaterialReceiptLineApi.edit(this.tbWmsMaterialReceiptLineFormData).then(response => {
              this.$message.success('修改成功')
              this.tbWmsMaterialReceiptLineFormDialog.visible = false
              this.handleQuery()
            })
          } else {
            TbWmsMaterialReceiptLineApi.add(this.tbWmsMaterialReceiptLineFormData).then(response => {
              this.$message.success('添加成功')
              this.tbWmsMaterialReceiptLineFormDialog.visible = false
              this.handleQuery()
            })
          }
        }
      })
    },
    resetTbWmsMaterialReceiptLineFormDialog() {
      this.tbWmsMaterialReceiptLineFormDialog = {
        title: '',
        visible: false
      }
      this.tbWmsMaterialReceiptLineFormData = Object.assign({}, defaultTbWmsMaterialReceiptLineFormData)
      this.resetForm('tbWmsMaterialReceiptLineForm')
    },
    handleSelectionChange(selection) {
      this.multipleSelection = selection
      this.isSingle = selection.length !== 1
      this.isMultiple = !selection.length
    },
    resetQuery() {
      this.page.current = 1
      this.resetForm('queryForm')
      this.handleQuery()
    }
  }
}
</script>
